{extend name="base"}
{block name="style"}{/block}
{block name="content"}

<div class="page-title">

	<div class="breadcrumb-env pull-left">

		<ol class="breadcrumb bc-1">
			<li>
				<a href="{:url('Index/index')}"><i class="fa-home"></i>首页</a>
			</li>
			<li>
				<a href="">角色管理</a>
			</li>
			<li class="active">
				<strong>角色列表</strong>
			</li>
		</ol>

	</div>
</div>

<div class="row">
	<div class="col-md-12">

		<!-- ******************************************************************************************************** -->

		<!-- Removing search and results count filter -->
		<div class="panel panel-default">

			<div class="panel-heading btn-toolbar">
				<h3 class="panel-title">角色管理</h3>
				<!-- <div class="panel-options pull-right"> -->
				<div class="btn-toolbar pull-right">
					<div class="btn-group focus-btn-group ">
						<a href="{:url('Role/index')}" class="btn btn-default btn-primary">
							<span class="fa-asterisk"></span>返回
						</a>
					</div>
				</div>
				<!-- </div> -->
			</div>

			<div class="panel-body"></div>

			<form class="validate add-form" novalidate="novalidate">

				<div class="row">
					<div class="col-md-12">

						<div class="form-group col-md-5">
							<label for="field-2" class="control-label">角色名称</label>
							<input type="text" class="form-control" name="name" placeholder="角色名称">
						</div>

					</div>
				</div>
				<div class="row">
					<div class="col-md-12">

						<div class="form-group col-md-12">
							<label for="field-2" class="control-label pull-left">节点选择</label>
							<input type="hidden" name="ids" value="">
							<div class="form-control js-tree" style="overflow: hidden; overflow-wrap: break-word; height: initial;">
							</div>
						</div>

						<script>
							$(function(){
								$('.js-tree').on("changed.jstree", function (e, data) {
									var ids = data.selected;
									$('input[name="ids"]').val(ids.join(','));
								}).on('select_node.jstree', function (e, data) {
									if (data.event) {
										data.instance.select_node(data.node.children_d);
										data.instance.select_node(data.node.parents);
									}
								}).on('deselect_node.jstree', function (e, data) {
									if (data.event) {
										data.instance.deselect_node(data.node.children_d);
									}
								}).jstree({
									"core" : {
										"data":{$menu}
									},
									"checkbox" : {
										"keep_selected_style" : false,
										"cascade": "", 
										"three_state": false
									},
									"expand_selected_onload": true,
									"plugins" : [ "checkbox" ]
								}); 
							});
						</script>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="form-group col-md-10">
							<label for="field-7" class="control-label">备注</label>

							<textarea class="form-control autogrow" name="desc" placeholder="备注"
								style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 50px;"></textarea>
						</div>
					</div>
				</div>

			</form>
			<div class="row">
				<div class="col-md-12">
					<div class="form-group col-md-5">
						<div class="btn-group focus-btn-group ">
							<button class="btn btn-default btn-primary" onclick="add_from()">提交</button>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

{/block}
{block name="script"}
<link rel="stylesheet" href="__STATIC__/js/jstree/themes/default/style.min.css" />
<script src="__STATIC__/js/jstree/jstree.min.js"></script>
<script>
	$(function(){
		nav_show('{$Request.controller}-index');
	});
	function add_from() {
		var res = $(".add-form").serializeArray();

		$.post("{:url('Role/save')}", res, function (data) {
			if (data.error > 0) {
				toastr.error(data.msg);
			} else {
				toastr.success(data.msg);
				location.href = "{:url('Role/index')}";
			}
		}, "json");
	}
</script>
{/block}